import 'package:flutter/material.dart';

class PaymentScreen extends StatefulWidget {
  const PaymentScreen({super.key});

  @override
  State<PaymentScreen> createState() => _PaymentScreenState();
}

class _PaymentScreenState extends State<PaymentScreen> {
  double _paymentAmount = 1288.00;
  String _selectedCurrency = 'SZC';
  String _selectedScene = '文旅';
  String _selectedPaymentMethod = 'SZC';
  late TextEditingController _amountController;

  final List<Map<String, dynamic>> _quickAmounts = [
    {'label': '¥100', 'value': 100.0},
    {'label': '¥500', 'value': 500.0},
    {'label': '¥1000', 'value': 1000.0},
  ];

  final List<Map<String, dynamic>> _paymentScenes = [
    {
      'id': '文旅',
      'title': '文旅',
      'subtitle1': '景区门票',
      'subtitle2': '文化体验',
      'color': const Color(0xFFFAAD14),
      'backgroundColor': const Color(0xFFFFF7E6),
      'icon': Icons.location_on,
    },
    {
      'id': '电商',
      'title': '电商',
      'subtitle1': '非遗商品',
      'subtitle2': '手工艺品',
      'color': const Color(0xFF52C41A),
      'backgroundColor': const Color(0xFFF0FFF4),
      'icon': Icons.shopping_bag,
    },
    {
      'id': '元宇宙',
      'title': '元宇宙',
      'subtitle1': '数字藏品',
      'subtitle2': '虚拟体验',
      'color': const Color(0xFF1890FF),
      'backgroundColor': const Color(0xFFF0F5FF),
      'icon': Icons.public,
    },
  ];

  final List<Map<String, dynamic>> _paymentMethods = [
    {
      'id': 'SZC',
      'name': '苏绣稳定币',
      'symbol': 'SZC',
      'color': const Color(0xFF1890FF),
      'backgroundColor': const Color(0xFFE6F7FF),
      'balance': '5,680.50',
    },
    {
      'id': 'WDC',
      'name': '木雕稳定币',
      'symbol': 'WDC',
      'color': const Color(0xFF8B4513),
      'backgroundColor': const Color(0xFFFFF8DC),
      'balance': '3,245.80',
    },
    {
      'id': 'CCC',
      'name': '陶瓷稳定币',
      'symbol': 'CCC',
      'color': const Color(0xFF4682B4),
      'backgroundColor': const Color(0xFFF0F8FF),
      'balance': '2,156.30',
    },
    {
      'id': 'SCC',
      'name': '书法稳定币',
      'symbol': 'SCC',
      'color': const Color(0xFF2F4F4F),
      'backgroundColor': const Color(0xFFF5F5F5),
      'balance': '1,890.75',
    },
    {
      'id': 'PCC',
      'name': '国画稳定币',
      'symbol': 'PCC',
      'color': const Color(0xFF8B0000),
      'backgroundColor': const Color(0xFFFFE4E1),
      'balance': '4,567.20',
    },
  ];

  @override
  void initState() {
    super.initState();
    _amountController = TextEditingController(text: _paymentAmount.toStringAsFixed(2));
  }

  @override
  void dispose() {
    _amountController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF8F9FA),
      appBar: AppBar(
        backgroundColor: Colors.white.withOpacity(0.95),
        elevation: 0,
        leading: IconButton(
          onPressed: () => Navigator.pop(context),
          icon: Container(
            width: 32,
            height: 32,
            decoration: BoxDecoration(
              color: const Color(0xFFF5F5F7).withOpacity(0.8),
              borderRadius: BorderRadius.circular(16),
            ),
            child: const Icon(
              Icons.arrow_back_ios_new,
              color: Color(0xFF1890FF),
              size: 16,
            ),
          ),
        ),
        title: const Text(
          '跨场景支付',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.w700,
            color: Color(0xFF1D1D1F),
          ),
        ),
        centerTitle: true,
        actions: [
          IconButton(
            onPressed: () {
              _showHelpDialog();
            },
            icon: Container(
              width: 32,
              height: 32,
              decoration: BoxDecoration(
                color: const Color(0xFFE6F7FF).withOpacity(0.8),
                borderRadius: BorderRadius.circular(16),
              ),
              child: const Icon(
                Icons.help_outline,
                color: Color(0xFF1890FF),
                size: 16,
              ),
            ),
          ),
        ],
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // 支付金额卡片
            _buildAmountCard(),
            const SizedBox(height: 16),
            // 场景选择卡片
            _buildSceneCard(),
            const SizedBox(height: 16),
            // 支付方式卡片
            _buildPaymentMethodCard(),
            const SizedBox(height: 8),
            // 费用优势展示
            _buildAdvantageCard(),
            const SizedBox(height: 8),
            // 支付确认按钮
            _buildPaymentButton(),
          ],
        ),
      ),
    );
  }

  Widget _buildAmountCard() {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(24),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: const Color(0xFF1890FF).withOpacity(0.08),
            blurRadius: 16,
            offset: const Offset(0, 8),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            '支付金额',
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.w500,
              color: Color(0xFF8E8E93),
            ),
          ),
          const SizedBox(height: 12),
          // 金额输入框
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            decoration: BoxDecoration(
              color: const Color(0xFFF5F5F7),
              borderRadius: BorderRadius.circular(12),
              border: Border.all(color: const Color(0xFFE5E5E7)),
            ),
            child: TextFormField(
              controller: _amountController,
              keyboardType: const TextInputType.numberWithOptions(decimal: true),
              textInputAction: TextInputAction.done,
              style: const TextStyle(
                fontSize: 32,
                fontWeight: FontWeight.w700,
                color: Color(0xFF1D1D1F),
              ),
              decoration: const InputDecoration(
                hintText: '0.00',
                hintStyle: TextStyle(
                  fontSize: 32,
                  fontWeight: FontWeight.w700,
                  color: Color(0xFFBDBDBD),
                ),
                prefixText: '¥ ',
                prefixStyle: TextStyle(
                  fontSize: 32,
                  fontWeight: FontWeight.w700,
                  color: Color(0xFF1D1D1F),
                ),
                border: InputBorder.none,
                contentPadding: EdgeInsets.symmetric(vertical: 12),
              ),
              onChanged: (value) {
                setState(() {
                  _paymentAmount = double.tryParse(value) ?? 0.0;
                });
              },
            ),
          ),
          const SizedBox(height: 16),
          // 快速金额选择
          Row(
            children: [
              ..._quickAmounts.map((amount) => Padding(
                padding: const EdgeInsets.only(right: 12),
                child: GestureDetector(
                  onTap: () {
                    setState(() {
                      _paymentAmount = amount['value'];
                      _amountController.text = _paymentAmount.toStringAsFixed(2);
                    });
                  },
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
                    decoration: BoxDecoration(
                      color: const Color(0xFFE6F7FF),
                      borderRadius: BorderRadius.circular(10),
                    ),
                    child: Text(
                      amount['label'],
                      style: const TextStyle(
                        fontSize: 12,
                        fontWeight: FontWeight.w500,
                        color: Color(0xFF1890FF),
                      ),
                    ),
                  ),
                ),
              )),

            ],
          ),
        ],
      ),
    );
  }

  Widget _buildSceneCard() {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(24),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: const Color(0xFF1890FF).withOpacity(0.08),
            blurRadius: 16,
            offset: const Offset(0, 8),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            '支付场景',
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.w500,
              color: Color(0xFF8E8E93),
            ),
          ),
          const SizedBox(height: 16),
          Row(
            children: _paymentScenes.map((scene) {
              final isSelected = _selectedScene == scene['id'];
              return Expanded(
                child: GestureDetector(
                  onTap: () {
                    setState(() {
                      _selectedScene = scene['id'];
                    });
                  },
                  child: Container(
                    margin: const EdgeInsets.only(right: 8),
                    padding: const EdgeInsets.all(16),
                    decoration: BoxDecoration(
                      color: scene['backgroundColor'],
                      borderRadius: BorderRadius.circular(12),
                      border: isSelected
                          ? Border.all(color: scene['color'], width: 2)
                          : null,
                    ),
                    child: Stack(
                      children: [
                        Column(
                          children: [
                            // 图标
                            Container(
                              width: 40,
                              height: 40,
                              decoration: BoxDecoration(
                                color: scene['color'].withOpacity(0.2),
                                borderRadius: BorderRadius.circular(20),
                              ),
                              child: Icon(
                                scene['icon'],
                                color: scene['color'],
                                size: 20,
                              ),
                            ),
                            const SizedBox(height: 12),
                            Text(
                              scene['title'],
                              style: const TextStyle(
                                fontSize: 16,
                                fontWeight: FontWeight.w600,
                                color: Color(0xFF1D1D1F),
                              ),
                            ),
                            const SizedBox(height: 4),
                            Text(
                              scene['subtitle1'],
                              style: const TextStyle(
                                fontSize: 13,
                                color: Color(0xFF8E8E93),
                              ),
                            ),
                            Text(
                              scene['subtitle2'],
                              style: const TextStyle(
                                fontSize: 13,
                                color: Color(0xFF8E8E93),
                              ),
                            ),
                          ],
                        ),
                        if (isSelected)
                          Positioned(
                            top: 8,
                            right: 8,
                            child: Container(
                              width: 16,
                              height: 16,
                              decoration: BoxDecoration(
                                color: scene['color'],
                                borderRadius: BorderRadius.circular(8),
                              ),
                              child: const Icon(
                                Icons.check,
                                color: Colors.white,
                                size: 12,
                              ),
                            ),
                          ),
                      ],
                    ),
                  ),
                ),
              );
            }).toList(),
          ),
        ],
      ),
    );
  }

  Widget _buildPaymentMethodCard() {
    final selectedMethod = _paymentMethods.firstWhere(
      (method) => method['id'] == _selectedPaymentMethod,
      orElse: () => _paymentMethods.first,
    );

    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(24),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: const Color(0xFF1890FF).withOpacity(0.08),
            blurRadius: 16,
            offset: const Offset(0, 8),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            '支付方式',
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.w500,
              color: Color(0xFF8E8E93),
            ),
          ),
          const SizedBox(height: 12),
          Container(
            width: double.infinity,
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
            decoration: BoxDecoration(
              color: selectedMethod['backgroundColor'],
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: selectedMethod['color']),
            ),
            child: DropdownButtonHideUnderline(
              child: DropdownButton<String>(
                value: _selectedPaymentMethod,
                isExpanded: true,
                icon: Icon(
                  Icons.keyboard_arrow_down,
                  color: selectedMethod['color'],
                ),
                onChanged: (String? newValue) {
                  if (newValue != null) {
                    setState(() {
                      _selectedPaymentMethod = newValue;
                    });
                  }
                },
                items: _paymentMethods.map<DropdownMenuItem<String>>((method) {
                   return DropdownMenuItem<String>(
                     value: method['id'],
                     child: Padding(
                       padding: const EdgeInsets.symmetric(vertical: 4),
                       child: Row(
                         children: [
                           Container(
                             width: 20,
                             height: 20,
                             decoration: BoxDecoration(
                               color: method['color'],
                               borderRadius: BorderRadius.circular(10),
                             ),
                             child: Center(
                               child: Text(
                                 method['symbol'],
                                 style: const TextStyle(
                                   fontSize: 7,
                                   fontWeight: FontWeight.w700,
                                   color: Colors.white,
                                 ),
                               ),
                             ),
                           ),
                           const SizedBox(width: 8),
                           Expanded(
                             child: Text(
                               '${method['name']} (余额: ${method['balance']})',
                               style: const TextStyle(
                                 fontSize: 13,
                                 fontWeight: FontWeight.w600,
                                 color: Color(0xFF1D1D1F),
                               ),
                               overflow: TextOverflow.ellipsis,
                             ),
                           ),
                         ],
                       ),
                     ),
                   );
                 }).toList(),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildAdvantageCard() {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: const Color(0xFFF0FFF4),
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: const Color(0xFF52C41A)),
      ),
      child: Row(
        children: [
          Container(
            width: 24,
            height: 24,
            decoration: BoxDecoration(
              color: const Color(0xFFD1FAE5),
              borderRadius: BorderRadius.circular(12),
            ),
            child: const Icon(
              Icons.check,
              color: Color(0xFF52C41A),
              size: 16,
            ),
          ),
          const SizedBox(width: 12),
          const Expanded(
            child: Text(
              '支付优势: 手续费 0.3% | 额外9折 | <3秒确认',
              style: TextStyle(
                fontSize: 12,
                fontWeight: FontWeight.w600,
                color: Color(0xFF52C41A),
              ),
            ),
          ),
          const Text(
            '节省 ¥189.26',
            style: TextStyle(
              fontSize: 12,
              fontWeight: FontWeight.w700,
              color: Color(0xFF52C41A),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildPaymentButton() {
    return Container(
      width: double.infinity,
      height: 48,
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          colors: [Color(0xFF1890FF), Color(0xFF40A9FF)],
        ),
        borderRadius: BorderRadius.circular(28),
      ),
      child: ElevatedButton(
        onPressed: () {
          _processPayment();
        },
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.transparent,
          shadowColor: Colors.transparent,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(28),
          ),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '确认支付 ¥${_paymentAmount.toStringAsFixed(2)}',
              style: const TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.w600,
                color: Colors.white,
              ),
            ),
            const SizedBox(width: 8),
            Container(
              width: 16,
              height: 16,
              decoration: BoxDecoration(
                color: Colors.white.withOpacity(0.2),
                borderRadius: BorderRadius.circular(8),
              ),
              child: const Icon(
                Icons.security,
                color: Colors.white,
                size: 12,
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _showHelpDialog() {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('跨场景支付帮助'),
        content: const Text(
          '跨场景支付是基于区块链技术的创新支付方式，支持文旅、电商、元宇宙等多个场景，具有手续费低、确认速度快、安全可靠等优势。',
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('知道了'),
          ),
        ],
      ),
    );
  }

  void _processPayment() {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('支付确认'),
        content: Text(
          '确认支付 ¥${_paymentAmount.toStringAsFixed(2)} 到 $_selectedScene 场景？',
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('取消'),
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.pop(context);
              _showPaymentSuccess();
            },
            child: const Text('确认'),
          ),
        ],
      ),
    );
  }

  void _showPaymentSuccess() {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Row(
          children: [
            Icon(Icons.check_circle, color: Color(0xFF52C41A)),
            SizedBox(width: 8),
            Text('支付成功'),
          ],
        ),
        content: Text(
          '支付 ¥${_paymentAmount.toStringAsFixed(2)} 已成功完成！',
        ),
        actions: [
          ElevatedButton(
            onPressed: () {
              Navigator.pop(context);
              Navigator.pop(context);
            },
            child: const Text('完成'),
          ),
        ],
      ),
    );
  }
}